<template>
        <el-form class="search-default"  :model="form">
            <el-row :gutter="10">
                <el-col :class="['form-item']" :style="{'width':width&&defaulSelectItems.length==1?width+'px':''}" :span="colSpan" v-for="(item,index) in defaulSelectItems" :key="item.id">
                    <el-input size="small" clearable class="form-i" type="text" v-model.trim="form[item.field]" v-if="item.type == 'input'" :placeholder="`请选择${item.label}`"></el-input>
                    <el-select   style="width: 100%;" :multiple="item.multiple" class="form-i" clearable size="small" v-model="form[item.field]" :placeholder="`请选择${item.label}`" v-if="item.type == 'select'||item.type == 'checkBox'">
                        <el-option :label="m.name" :value="m.code" v-for="m in item.value" :key="m.id"></el-option>
                    </el-select>
                    <el-date-picker
                    style="width: 100%;"
                    clearable
                    class="form-i"
                        size="small"
                        v-if="item.type == 'dateTime'"
                        v-model="form[item.field]"
                        type="date"
                        :placeholder="`请选择${item.label}`">
                    </el-date-picker>
                   
                </el-col>
                <slot></slot>
            </el-row>
        </el-form>
        
</template>
<script>
export default {
    props:{
        defaulSelectItems:{
            type:Array,
            default(){
                return []
            }
        },
        colSpan:{
            type:Number,
            default(){
                return 3
            }
        },
        width:Number
    },
    data() {
        return {
            form:{},
   
        }
    },
    methods:{
        reset(){
            this.form ={}
        },
        getForm(){
            return this.form
        }
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped>
.search-default{
    width:100%;
    display: flex;
    align-items: center;
}
.form-i{
    margin-bottom: 10px;
}
.form-item{
  
}
.form-item-width{
    width: 220px;
}
</style>